import React,{Component} from 'react'
import Son from './son'

class SonFather extends Component{
    state={
        doSometing:[],
        doneSometing:[],
        ctx:''
    }

    // 点击添加
    addSomeThing =()=>{
        const {doSometing,ctx} = this.state;
        doSometing.push(ctx)
        this.setState({doSometing:[...doSometing],ctx:''})
    }

    // 子组件想删除一件事件
    deleteSomeTing = (str,key) => {
        let deleteArr = this.state[str];
        deleteArr.splice(key,1)
        this.setState({[str]:[...deleteArr]})
    }

    // 子元素想操作事件从未完成到已完成
    AddDoSomeTing = (type,key) =>{
        let typeArr = type.split('_');

        let A = this.state[typeArr[0]+'Someting'];
        let B = this.state[typeArr[1]+'Someting'];

        B.push(A[key])
        A.splice(key,1)

        this.setState({[typeArr[0]+'Someting']:[...A],[typeArr[1]+'Someting']:[...B]})
    }
    
    render(){
        let {ctx,doSometing,doneSometing} = this.state
        const {deleteSomeTing,AddDoSomeTing} = this
        return <div>
            <input type="text" value={ctx} onChange={ev=>this.setState({ctx:ev.target.value})}/>
            <button onClick={()=>this.addSomeThing()}>添加</button>

        <Son doSometing={doSometing} doneSometing={doneSometing} deleteSomeTing={deleteSomeTing}  AddDoSomeTing={AddDoSomeTing}>
            <h3>待完成事项</h3>
            <h3>已完成事项</h3>
        </Son>
        </div>
    }
}

export default SonFather